<template>
  <div class="params">
    <el-card>
      <!-- 提示 -->
      <el-alert
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        effect="dark"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 级联菜单 -->
      <div class="cascade">
        <span>选择商品分类:</span>
        <el-cascader
          v-model="value"
          :options="categoriesList"
          :props="{
            expandTrigger: 'hover',
            label: 'cat_name',
            value: 'cat_id',
          }"
          @change="handleChange"
        ></el-cascader>
      </div>
      <el-tabs type="border-card" :before-leave="selectSel">
        <!-- 参数 -->
        <el-tab-pane v-for="item in elTabs" :key="item.id" :label="item.title">
          <el-button
            type="primary"
            @click="showAdd"
            :disabled="paramsList.length == 0"
            >{{ item.btn }}</el-button
          >
          <el-table
            :data="paramsList"
            max-height="600px"
            border
            style="width: 100%; margin: 10px 0"
          >
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div>
                  {{ scope.row }}
                  <!-- <el-tag
                    :key="tag"
                    v-for="tag in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput"
                    >+ New Tag</el-button
                  > -->
                </div>
              </template>
            </el-table-column>
            <el-table-column label="#" type="index"> </el-table-column>
            <el-table-column prop="attr_name" :label="item.label">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="showEdit(scope.row)"
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  >编辑</el-button
                >
                <el-button
                  @click="delParams(scope.row)"
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 编辑 -->
    <el-dialog title="编辑用户" :visible.sync="editDialogFormVisible">
      <el-form ref="paramsObj" v-model="paramsObj" :rules="rules">
        <el-form-item
          prop="attr_name"
          :label="paramsObj.title"
          :label-width="formLabelWidth"
        >
          <el-input v-model="paramsObj.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editParamsForm()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog title="添加用户" :visible.sync="addDialogFormVisible">
      <el-form ref="paramsObj" v-model="paramsObj" :rules="rules">
        <el-form-item
          prop="attr_name"
          :label="paramsObj.title"
          :label-width="formLabelWidth"
        >
          <el-input v-model="paramsObj.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParamsForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategories,
  getParams,
  getEditParams,
  getAddParams,
  getDelParams,
} from "@/api/index";
export default {
  data() {
    return {
      inputVisible: false,
      inputValue: "",
      value: [],
      paramsObj: {
        attr_sel: "only",
        id: "",
        title: "",
        attr_name: "",
        attrId: "",
        attr_vals: "",
      },
      rules: {
        attr_name: [
          { required: true, message: "分类名称不能为空", trigger: "blur" },
          {
            min: 0,
            trigger: "blur",
          },
        ],
      },
      categoriesList: [],
      paramsList: [],
      elTabs: [
        {
          id: 0,
          title: "动态参数",
          btn: "添加参数",
          label: "参数名称",
          sel: "only",
        },
        {
          id: 1,
          title: "静态属性",
          btn: "添加属性",
          label: "属性名称",
          sel: "many",
        },
      ],
      formLabelWidth: "120px",
      editDialogFormVisible: false,
      addDialogFormVisible: false,
    };
  },
  created() {
    this.getCategoriesData();
  },
  methods: {
    //删除参数
    async delParams(form) {
      let res =await this.$confirm("此操作将永久删除该参数, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(()=>{});
      if (!res) return this.$message("取消删除");
      let {meta:{msg,status}} = await getDelParams(form);
      status==200 ?this.$message.success(msg):this.$message.error(msg);
      this.getParamsData();
    },
    // 添加参数
    async addParamsForm() {
      let {
        meta: { msg, status },
      } = await getAddParams(this.paramsObj);
      if (status != 201) this.$message.error(msg);
      this.getParamsData();
      this.addDialogFormVisible = false;
    },
    showAdd() {
      this.addDialogFormVisible = true;
      this.paramsObj.attr_name = "";
    },
    // 编辑参数
    async editParamsForm() {
      let {
        meta: { msg, status },
      } = await getEditParams(this.paramsObj);
      if (status != 200) return this.$message.error(msg);
      this.getParamsData();
      this.editDialogFormVisible = false;
    },
    // 编辑参数显示弹框
    showEdit(form) {
      this.editDialogFormVisible = true;
      this.paramsObj.attrId = form.attr_id;
      this.paramsObj.attr_name = form.attr_name;
    },
    // 标签增加输入
    showInput() {
      this.inputVisible = true;
      //  this.$nextTick(()=>{
      //     this.$refs.saveTagInput.$refs.input.focus()
      //  })
    },
    // 增加标签
    handleInputConfirm() {
      console.log("152");
    },
    //删除标签
    handleClose(tag) {
      console.log(tag);
    },
    //参数类型
    selectSel(activeName) {
      this.paramsObj.attr_sel = this.elTabs[activeName].sel;
      this.paramsObj.title = this.elTabs[activeName].title;
      if (!this.paramsObj.id) return;
      this.getParamsData();
    },
    // 分类下拉框长度判断
    handleChange(value) {
      if (value.length < 3) {
        this.value = "";
        return this.$message.warning("只允许为第三级分类设置相关参数！");
      }
      this.paramsObj.id = value[value.length - 1];
      this.getParamsData();
    },
    //参数获取
    async getParamsData() {
      let {
        data,
        meta: { msg, status },
      } = await getParams(this.paramsObj.id, { sel: this.paramsObj.attr_sel });
      if (status != 200) return this.$message.error(msg);
      this.paramsList = data;
    },
    // 分类数据获取
    async getCategoriesData() {
      let {
        data,
        meta: { msg, status },
      } = await getCategories();
      if (status != 200) return this.$message.error(msg);
      this.categoriesList = data;
    },
  },
};
</script>

<style lang="less" scoped>
.params {
  .el-card {
    .cascade {
      margin: 20px 0;
    }
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
}
</style>